<template>
	<view class="order-search-container">

		<view class="search-form">
			<wd-form ref="formRef" :rules="rules" :model="formData">
				<wd-cell-group border>
					<!-- 动态渲染表单项 -->
					<template v-for="(field, index) in formFields" :key="index">
						<!-- 输入框类型 -->
						<wd-input v-if="field.type === 'input'" :label="field.label"
							:label-width="field.labelWidth || '120px'" :prop="field.prop" v-model="formData[field.prop]"
							:type="field.inputType || 'text'" :clearable="field.clearable || false"
							:placeholder="field.placeholder" />
			
						<!-- 下拉选择器类型 -->
						<wd-picker v-else-if="field.type === 'picker'" :label="field.label"
							:label-width="field.labelWidth || '120px'" :prop="field.prop" v-model="formData[field.prop]"
							:columns="field.columns" :placeholder="field.placeholder" />
			
						<!-- 日期时间选择器类型 -->
						<wd-datetime-picker v-else-if="field.type === 'datetime-picker'" :label="field.label"
							:label-width="field.labelWidth || '120px'" :prop="field.prop" v-model="formData[field.prop]"
							:type="field.datetimeType || 'datetime'" :formatter="field.formatter"
							:display-format-tab-label="field.displayFormatTabLabel"
							:tabs="field.tabs || ['date', 'time']" />
					</template>
				</wd-cell-group>
			
				<!-- 操作按钮 -->
				<view class="form-buttons">
					<wd-button type="primary" @click="handleSearch">查询</wd-button>
					<wd-button type="error" @click="handleReset">重置</wd-button>
				</view>
			</wd-form>
			
			
			 </view>
		<view class="order-list">
			<!-- 订单卡片项 -->
			<view class="order-card" v-for="(order, index) in filteredOrders" :key="index">
				<!-- 第一行：订单号和订单状态 -->
				<view class="order-row row1">
					<text class="order-no">订单号：{{ order.orderNo }}</text>
					<view :class="['status-tag', order.statusClass]">{{ order.statusText }}</view>
				</view>
		
				<!-- 第二行：图片、服务信息和金额 -->
				<view class="order-row row2">
					<view class="product-image">
						<image :src="order.productImage || ''" mode="aspectFill"></image>
					</view>
		
					<view class="product-info">
						<text class="service-name">{{ order.serviceName }}</text>
						<text class="product-model">{{ order.productModel }}</text>
					</view>
		
					<view class="order-amount">
						<text class="amount-label">金额</text>
						<text class="amount-value">¥{{ order.amount }}</text>
					</view>
				</view>
		
				<!-- 第三行：支付状态、订单时间和详情按钮 -->
				<view class="order-row row3">
					<view :class="['pay-tag', order.payStatusClass]">{{ order.payStatusText }}</view>
					<text class="order-time">{{ order.createTime }}</text>
					<button class="detail-btn">详情</button>
				</view>
			</view>
		
		
		</view>
	</view>

</template>

<script setup>
	import { useFontSizeStore } from '@/stores/fontSizeStore';
		
		const fontSizeStore = useFontSizeStore();
		import {volunteer_serviceRecordApi} from "@/api/volunteer"
		// import { onLoad } from '@dcloudio/uni-app';
		
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	// 表单引用
	const formRef = ref(null)
	const filteredOrders = ref([])
	// 服务类型列表数据
	const serviceTypeList = [{
			label: '家电维修',
			value: 'appliance'
		},
		{
			label: '水电安装',
			value: 'water'
		},
		{
			label: '清洁服务',
			value: 'cleaning'
		},
		{
			label: '管道疏通',
			value: 'pipe'
		}
	]

	// 订单状态列表数据
	const orderTypeList = [{
			label: '全部',
			value: 'all'
		},
		{
			label: '待处理',
			value: 'pending'
		},
		{
			label: '处理中',
			value: 'processing'
		},
		{
			label: '已完成',
			value: 'completed'
		},
		{
			label: '已取消',
			value: 'cancelled'
		}
	]

	// 日期时间格式化函数
	const rangeFormatter = (type, value) => {
		const suffixMap = {
			year: '年',
			month: '月',
			day: '日',
			hour: '时',
			minute: '分'
		}
		return `${value}${suffixMap[type] || ''}`
	}
	const rangeFormatter1 = (type, value) => {
		const suffixMap = {
			year: '年',
			month: '月',
			day: '日',
		}
		return `${value}${suffixMap[type] || ''}`
	}

	// 表单字段配置
	const formFields = [{
			type: 'input',
			label: '订单号',
			prop: 'orderNumber',
			inputType: 'text',
			clearable: true,
			placeholder: '请输入订单号'
		},
		{
			type: 'picker',
			label: '服务类型',
			prop: 'serviceType',
			placeholder: '请选择服务类型',
			columns: [serviceTypeList]
		},
		{
			type: 'picker',
			label: '订单状态',
			prop: 'orderType',
			placeholder: '请选择订单状态',
			columns: [orderTypeList]
		},
		{
			type: 'datetime-picker',
			label: '单个时间',
			prop: 'singleTime',
			placeholder: '请选择单个时间',
			datetimeType: 'date',
			displayFormatTabLabel: (items) => {
				return items.length === 5 ?
					`${items[0].label}-${items[1].label}-${items[2].label} ${items[3].label}:${items[4].label}` :
					'请选择时间'
			}
		},
		{
			type: 'datetime-picker',
			label: '区域时间',
			prop: 'mulTime',
			placeholder: '请选区域时间',
			datetimeType: 'date',
			isRange: true,
			startPlaceholder: '开始时间',
			endPlaceholder: '结束时间',
			// formatter: rangeFormatter,
			// tabs: ['start', 'end'],
			displayFormatTabLabel: (items) => {
				// 处理范围选择的二维数组
				if (Array.isArray(items) && items.length === 2) {
					const formatSingle = (item) => {
						return item.length === 5 ?
							`${item[0].label}-${item[1].label}-${item[2].label} ${item[3].label}:${item[4].label}` :
							'未选择'
					}
					// return [
					//   `开始: ${formatSingle(items[0])}`,
					//   `结束: ${formatSingle(items[1])}`
					// ]
				}
				// return ['开始时间', '结束时间']
			}
		}
	]

	// 表单数据
	const formData = reactive({
		orderNumber: '',
		serviceType: '',
		orderType: '',
		singleTime: Date.now(), // 单个时间默认当前时间
		mulTime: [
			Date.now() - 7 * 24 * 60 * 60 * 1000, // 7天前
			Date.now() // 当前时间
		] // 时间范围默认最近7天
	})

	// 表单验证规则
	const rules = {
		orderNumber: [{
			required: false,
			message: '请输入订单号',
			trigger: 'blur'
		}],
		serviceType: [{
			required: false,
			message: '请选择服务类型',
			trigger: 'change'
		}],
		orderType: [{
			required: false,
			message: '请选择订单状态',
			trigger: 'change'
		}],
		singleTime: [{
			required: false,
			message: '请选择单个时间',
			trigger: 'change'
		}],
		mulTime: [{
			required: false,
			message: '请选择时间范围',
			trigger: 'change'
		}]
	}

	onMounted(()=>{
		
	})

	// 处理查询
	const handleSearch = () => {
		volunteer_serviceRecordApi({...formData}).then((res)=>{
			if(res.code==200){
				filteredOrders.value = res.data;
			}
			
		})
		
	}

	// 处理重置
	const handleReset = () => {
		// formRef.value.resetFields()
		formRef.value.reset()
		// 重置时间默认值
		// formData.singleTime = Date.now()
		// formData.mulTime = [
		//   Date.now() - 7 * 24 * 60 * 60 * 1000,
		//   Date.now()
		// ]
	}
</script>

<style scoped>
	.order-search-container {
		background-color: #f5f5f5;
		height: 100vh;
	
		padding: 12px 16px;
			padding-bottom: 100rpx;
	}

 
::v-deep .wd-form{
		border-radius: 16rpx!important;
}

	.search-form {
		background-color: #fff;
		overflow: hidden;
		border-radius: 16rpx!important;
		margin-bottom: 30rpx;
	}

	::v-deep .wd-cell-group {
		margin: 0;
		border-top: none;
	}

	::v-deep .wd-cell {
		padding: 12px 16px;
	}

	::v-deep .wd-cell:last-child {
		border-bottom: none;
	}

	.form-buttons {
		padding: 16px 0;
		display: flex;
		justify-content: space-evenly;
	}

	::v-deep .wd-button {
		height: 44px;
		line-height: 44px;
		font-size: 16px;
	}

	/* 确保日期时间选择器的Tab显示 */
	::v-deep .wd-datetime-picker__tabs {
		display: flex !important;
		visibility: visible !important;
		margin: 0 16px;
		border-bottom: 1px solid #eee;
	}

	::v-deep .wd-datetime-picker__tab {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
		color: #666;
		position: relative;
	}

	::v-deep .wd-datetime-picker__tab--active {
		color: #1890ff;
		font-weight: 500;
	}

	::v-deep .wd-datetime-picker__tab--active::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #1890ff;
	}

	/* 范围选择器样式调整 */
	::v-deep .wd-datetime-picker.is-range {
		display: flex;
		align-items: center;
	}

	::v-deep .wd-datetime-picker.is-range .wd-datetime-picker__input {
		width: calc(50% - 16px) !important;
	}

	::v-deep .wd-datetime-picker__separator {
		margin: 0 8px;
		color: #999;
	}

	/* 订单列表样式 */
	.order-list {
		/* padding: 20rpx 24rpx; */
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		padding-top: 0;
	}

	/* 订单卡片 */
	.order-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 订单行通用样式 */
	.order-row {
		display: flex;
		width: 100%;
		margin-bottom: 16rpx;
		align-items: center;
	}

	.order-row:last-child {
		margin-bottom: 0;
	}

	/* 第一行：订单号和订单状态 */
	.row1 {
		justify-content: space-between;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.order-no {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	/* 第二行：图片、服务信息和金额 */
	.row2 {
		align-items: center;
		gap: 16rpx;
		padding: 10rpx 0;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		overflow: hidden;
		background-color: #f5f5f5;
		flex-shrink: 0;
	}

	.product-image image {
		width: 100%;
		height: 100%;
	}

	.product-info {
		flex: 1;
		min-width: 0;
	}

	.service-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-bottom: 6rpx;
	}

	.product-model {
		font-size: 22rpx;
		color: #666;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-amount {
		flex-shrink: 0;
		text-align: right;
		min-width: 120rpx;
	}

	.amount-label {
		font-size: 22rpx;
		color: #666;
		display: block;
	}

	.amount-value {
		font-size: 26rpx;
		color: #f5222d;
		font-weight: 600;
	}

	/* 第三行：支付状态、订单时间和详情按钮 */
	.row3 {
		justify-content: space-between;
		padding-top: 16rpx;
		border-top: 1px solid #f5f5f5;
	}

	.order-time {
		font-size: 22rpx;
		color: #666;
		margin: 0 10rpx;
		flex: 1;
		text-align: center;
	}

	/* 状态标签样式 */
	.status-tag {
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: white;
	}

	.status-tag.processing {
		background-color: #1890ff;
	}

	.status-tag.completed {
		background-color: #52c41a;
	}

	.status-tag.returned {
		background-color: #fa8c16;
	}

	.status-tag.unknown {
		background-color: #999;
	}

	/* 支付状态标签样式 */
	.pay-tag {
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 22rpx;
		white-space: nowrap;
	}

	.pay-tag.paid {
		background-color: #f6ffed;
		color: #52c41a;
	}

	.pay-tag.unpaid {
		background-color: #fff1f0;
		color: #f5222d;
	}

	/* 详情按钮 */
	.detail-btn {
		background-color: #1890ff;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 8rpx 20rpx;
		font-size: 24rpx;
		height: auto;
		line-height: 1;
		white-space: nowrap;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 30rpx;
		color: #ddd;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 加载状态样式 */
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;
	}

	.spinner {
		width: 50rpx;
		height: 50rpx;
		border: 5rpx solid #eee;
		border-top-color: #1890ff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>